// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意点：Vue3没有全局过滤器。
import defaultImg from '@/assets/images/200.png'
import Message from './Message'
// Vue2 全局注册组件
// Vue.component('组件名', 组件)

// Vue3 全局注册组件
// app.component('组件名', 组件)
const importFn = require.context('./', false, /\.vue$/)
export default {
  // install 这种写法以后是提供给 app.use() 安装组件库用的
  install (app) {
    // Vue3 全局注册组件
    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })
    defineDirective(app)

    app.config.globalProperties.$message = Message// 原型函数
  }
}
const defineDirective = (app) => {
  // app.config.globalProperties.$message = Message// 原型函数
  app.directive('lazy', {
    mounted (el, banding) {
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observe.unobserve(el)
          el.onerror = () => {
            el.src = defaultImg
          }
          el.src = banding.value
        }
      }, {
        threshold: 0
      })
      observe.observe(el)
    }
  })
}
